<template>
    <SubMenu >
        <template #title>
            <div>
                {{data.title}}
            </div>
        </template>
        <template v-for="child in data.children">
              <MenuItem :key="child.title" v-if="!child.children">{{child.title}}</MenuItem>
                <!-- 有子孙节点递归组件本身 -->
              <reSub v-else :key="child.title" :data="child"></reSub>
              
        </template>
    </SubMenu>
</template>
<script>
import SubMenu from "./SubMenu.vue"
import MenuItem from "./MenuItem.vue";
export default {
    name:"reSub",//用于递归调用自己
    data(){
        return{

        }
    },
    props:{
        data:{
            type:Object,
            default:()=>({})
        }
    },
    methods:{

    },
    components:{
        SubMenu,MenuItem
    },
    mounted(){
        console.log(this.data)
    }
}
</script>